<template>
	<scroll-view scroll-y="true" style="height: 100vh;">

		<view class="tabbar">
			<view v-for="(item,index) in tabbartitle" :key="index" :class="['items',hoverindex==index?'itemshover':'']" @click="hoverindex=index">{{item}}</view>
		</view>

		<view class="contanier" v-if="hoverindex==0">
			<view class="setpass">
				<view class="pass-title">选择已授权的公众号<text class="asksymbols" @click="gotostep">?</text></view>
			</view>

			<view :class="['authorization',memoryinfo.wx_mp_id==item.id?'authorizationhover':'']" v-for="(item,index) in listdata" :key="index" @click="authorization(index)">
				<view class="companyinfo">
					<image src="../../static/image/rz_icon.png" mode="aspectFill"></image>
					<text>{{item.title}}</text>
				</view>
				<text :class="['shouquan',item.status==1?'bullcolor':'']">{{status[item.status]}}</text>
			</view>

			<view class="addauthorization" @click="addofficial">
				<text>+ 添加新授权</text>
			</view>

			<!--说明-->
			<view class="intro">
				<view class="huodong">
					<text>说明</text>
				</view>
				<text style="color: #FF0000;">(注：添加授权需要分享至朋友或者微信群点开链接授权)</text>
				<text>授权公众号后，平台将自动完成配置，无需手动配置，用户只需点击添加新授权按钮，发送到微信中生成自己的专属链接，发起及参与抽奖体验更佳，吸粉效率更加。</text>
			</view>
		</view>

		<view class="contanier" v-else>
			<view class="setpass">
				<view class="pass-title">设置公众号名称<text class="asksymbols" @click="gotostep">?</text></view>
				<view class="pass-input">
					<input placeholder="" @blur="blurinput" maxlength="15" :value="wx_mp_name" />
				</view>
			</view>
			<view class="save-button" @click="saveinfo">保存</view>
			<view class="shuoming" @click="gotostep">如何是使用手动设置发起公众号粉丝抽奖？</view>
			<view class="intro">
				<view class="huodong">
					<text>说明</text>
				</view>
				<text>如果你不想授权公众号，则可以通过手动配置的方式发起公众号粉色抽奖</text>
				<text>1.填写公众号名称和关键词后发起抽奖；</text>
				<text>2.在公众号后台设置关键词自动回复该小程序码；</text>
				<text>3.用户关注公众号后，回复关键词获取小程序码即可扫码参与抽奖</text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	/**
	 * 公众号授权参与
	 */
	
	export default {
		data() {
			return {
				tabbartitle: ['一键授权', '手动设置'],
				hoverindex: 0,
				wx_mp_name: '', //公众号名称
				listdata: '',
				status: ['未授权', '已授权', '授权取消'],
				cardinfo: '',
				memoryinfo:'',
			}
		},
		onLoad() {
			let lottey = uni.getStorageSync('lettytables');
		//	console.log(lottey.luckconfig.senior.joinconfig);
			//内存数据
			this.memoryinfo = lottey.luckconfig.senior.joinconfig;
			//手动设置公众号
			if(!lottey.luckconfig.senior.joinconfig.wx_mp_id && lottey.luckconfig.senior.joinconfig.wx_mp_name){
				this.hoverindex = 1;
				this.wx_mp_name = lottey.luckconfig.senior.joinconfig.wx_mp_name;
			}
			
		},
		watch:{
			listdata(){
				
			}
		},
		onShow() {
			//获取授权列表
			this.getauth();
		},
		methods: {
			//去添加公众号 
			addofficial() {
				this.$HttRequest({
					url: '/thirdParty/oplatform/preAuthCode',
					param: {type:'shareCard'} 
				},'GET',true).then((res) => {
					//console.log(res);
					if (res.status === 10000) {
						let cardinfo = res.data
						let _this = this;
						uni.share({
							provider: "weixin",
							scene: "WXSceneSession",
							type: 0,
							href: cardinfo.url,
							title: cardinfo.title,
							summary: cardinfo.description,
							imageUrl: 'https://fission-com.oss-cn-beijing.aliyuncs.com/rg-static/image/logo/72x72.png',
							success: function(res) {
								_this.$ShowMsg('分享朋友朋友或群成功！')
							},
							fail: function(err) {
								console.log(err);
								_this.$ShowMsg('分享朋友失败！')
							}
						})
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				})
			},
			
			//一键授权选择
			authorization(index) {
				console.log(this.listdata,index);
				if (this.listdata[index].status != 1) {
					this.$ShowMsg('当前公众号未授权！');
					return;
				}
				let lottey = uni.getStorageSync('lettytables');
				try {
					lottey.luckconfig.senior.joinconfig.wx_mp_name = this.listdata[index].title;
					lottey.luckconfig.senior.joinconfig.wx_mp_id = this.listdata[index].id;
					//开启粉丝参与设置
					lottey.luckconfig.senior.joinfans = true;
					lottey.luckconfig.senior.joincondition = false;
					uni.setStorageSync('lettytables', lottey);
					uni.navigateBack({
						delta: 1
					})
				} catch (e) {
					this.$ShowMsg(e);
				}
			},
			//获取列表
			getauth() {
				this.$HttRequest({
					url: '/mpApp/lists',
					param: ''
				}).then((res) => {
					console.log(res); 
					if (res.status === 10000) {
						this.listdata = res.data.data;
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				})
			},

			gotostep() {
				uni.navigateTo({
					url: '/pages/article/index?key=GZHFSCJBZ',
				})
			},
			saveinfo() {
				if (!this.wx_mp_name) {
					this.$ShowMsg('公众号名称不能为空！');
					return;
				}
				let lottey = uni.getStorageSync('lettytables');
				try {
					lottey.luckconfig.senior.joinconfig.wx_mp_name = this.wx_mp_name;
					lottey.luckconfig.senior.joinconfig.wx_mp_id = '';
					//开启粉丝参与设置
					lottey.luckconfig.senior.joinfans = true;
					lottey.luckconfig.senior.joincondition = false;
					uni.setStorageSync('lettytables', lottey);
					uni.navigateBack({
						delta: 1
					})
				} catch (e) {
					this.$ShowMsg(e);
				}
			},
			blurinput(e) {
				this.wx_mp_name = e.detail.value
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.tabbar {
		width: 95%;
		margin: 0 auto;
		font-size: 30rpx;
		color: #000;
		font-weight: bold;
		background-color: #fff;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		display: flex;
		flex: 1;
		height: 100rpx;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;

		.items {
			display: flex;
			flex: 1;
			height: 100rpx;
			justify-content: center;
			align-items: center;
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
		}

		.itemshover {
			background-color: #b9dfff;
			color: $uni-color-primary;
		}
	}

	.addauthorization {
		height: 120rpx;
		flex: 1;
		background-color: $uni-botton-primary;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		margin: 20rpx auto;
		border-radius: 10rpx;
		width: 90%;
	}

	.authorization {
		width: 90%;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		height: 120rpx;
		border: 2rpx solid #c2c2c2;
		background-color: #fcfcfc;
		margin: 40rpx auto;
		border-radius: 10rpx;

		.shouquan {
			margin-right: 20rpx;
			color: #b7b3b4;
			font-size: 25rpx;
		}

		.bullcolor {
			color: $uni-color-primary;
		}

		.companyinfo {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 20rpx;

			text {
				font-weight: bold;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
	}

	.authorizationhover {
		border: 2rpx solid $uni-color-primary;
		background-color: #f1f8fc;
	}

	.shuoming {
		color: $uni-color-primary;
		font-size: 28rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		margin: 40rpx auto;
	}

	.asksymbols {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28rpx;
		height: 28rpx;
		border: 2rpx solid #9e9e9e;
		border-radius: 50%;
		font-size: 25rpx;
		margin-left: 10rpx;
		color: #9e9e9e;
		transform: scale(0.8);
	}

	.save-button {
		margin: 40rpx auto;
		width: 95%;
		height: 90rpx;
		background-color: $uni-color-primary;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
		margin-bottom: 40rpx;

	}

	.intro {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		color: #808080;
		font-size: 25rpx;
		width: 90%;
		margin: 30rpx auto;
		padding-bottom: 10rpx;

		text {
			margin: 10rpx 0;
		}

		.huodong {
			font-size: 28rpx;
			width: 100%;
			position: relative;
			color: #ababab;
			border-top: 1rpx solid #d3d1d1;
			margin-bottom: 40rpx;

			text {
				text-align: center;
				background-color: #fff;
				position: absolute;
				top: -35rpx;
				left: 270rpx;
				height: 50rpx;
				width: 80rpx;
				display: block;
				padding: 10rpx;
			}
		}
	}

	.contanier {
		background-color: #fff;
		width: 95%;
		margin: 0 auto;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.setpass {
		flex: 1;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		color: #666666;

		.pass-title {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 95%;
			font-size: 25rpx;

			margin: 10rpx 0;
			margin-top: 40rpx;
		}

		.pass-input {
			background-color: #fff;
			width: 100%;
			height: 100rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: flex-start;

			align-items: center;

			input {
				background-color: #f6f6f6;
				height: 100rpx;
				width: 92%;
				margin: 0 auto;
				margin-top: 30rpx;
				padding-left: 20rpx;

				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.pass {
		flex: 1;
		border: 1rpx solid #ece6d7;
		color: #736854;
		background-color: #fef7e5;
		padding: 30rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin: 20rpx 0;
	}
</style>
